<template>
	<view class="app">
		<cool-navbar @avatarTap="settings" v-model="serVal" :avatar="avatarNav"></cool-navbar>
		<u-gap height="15" bg-color="#F6F6F6"></u-gap>
		<!-- 页面内容开始 -->
		<view class="head ripple" @top="a">
			<view class="head_avatar_left">
				<u-avatar size="80" :src="vk.getVuex('$user.userInfo.avatar')||null"></u-avatar>
			</view>
			<view class="head_nickname_left">
				<text>{{vk.getVuex('$user.userInfo.nickname')||'null'}}</text>
				<text style="color: #999999;font-size: 24rpx;" class="desc">查看个人主页或编辑资料</text>
			</view>
			<view class="head_more_right" @tap.stop>
				<view class="circle ripple">
					<u-icon color="#999999" size="45" name="scan"></u-icon>
				</view>
				<u-icon color="#999999" size="45" name="arrow-right"></u-icon>
			</view>
		</view>

		<view style="padding: 0 30rpx;">
			<u-gap height="1" bg-color="#f5f5f5">
			</u-gap>
		</view>
		<view class="state">
			<view class="state_item">
				<text>55</text>
				<text>动态</text>
			</view>
			<view class="gap">
				<view class="gap_item">
				</view>
			</view>
			<view class="state_item">
				<text>33</text>
				<text>关注</text>
			</view>
			<view class="gap">
				<view class="gap_item">
				</view>
			</view>
			<view class="state_item" style="border:none;border-right-width: 0px">
				<text>16</text>
				<text>粉丝</text>
			</view>
		</view>
		<u-gap height="15" bg-color="#F6F6F6"></u-gap>
		<view class="body">

		</view>
		<view class="tabs">
			<u-tabs active-color="#1B975A" :list="tbsList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="foot">
			<text style="color: #999999;font-size: 25rpx;">仅显示最近100条浏览历史</text>
		</view>

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				serVal: '',
				avatarNav: require('../../static/myInfo/setting (2).png'),
				avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic%2F0b%2F17%2F04%2F0b1704a9741f4e7ddd07939877dd3590_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643518167&t=1b98f6f16c4d584177b6db7d136dcdd8',
				data: {

				},
				// 表单请求数据
				form1: {

				},
				scrollTop: 0,
				tbsList: [{
					name: '最近常去'
				}, {
					name: '浏览历史'
				}],
				current: 1
			}
		},
		onPageScroll(e) {
			that.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			a(e) {
				console.log(e)
			},
			// 页面数据初始化函数
			init(options) {
				if (!options) options = that.options;
				console.log("init: ", options);

			},
			change(index) {
				this.current = index;
			},
			settings(e){
				uni.navigateTo({
					url:'../settings/settings'
				})
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.app {
		.head {
			padding: 30rpx 30rpx;
			position: relative;
			display: flex;
			align-items: center;

			.head_avatar_left {
				display: flex;
				align-items: center;
			}

			.head_nickname_left {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

			}

			.head_more_right {

				display: flex;
				position: absolute;
				right: 5%;

				.circle {

					border-radius: 50%;
					padding: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.state {
			display: flex;
			justify-content: space-around;
			padding: 20rpx 30rpx;

			.state_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex: 1;
				color: #999999;
				font-size: 24rpx;
				line-height: 1.3;

			}

			.gap {
				// height: rpx;
				display: flex;
				align-items: center;

				.gap_item {
					height: 40rpx;
					border: 0 solid #e4e7ed;
					border-right-width: 1px;
				}
			}
		}

		.body {}

		.foot {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f6f6f6;
		}
	}

	.ripple {
		position: relative;
		//隐藏溢出的径向渐变背景
		overflow: hidden;
	}

	.ripple:after {
		content: " ";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		pointer-events: none;
		//设置径向渐变
		background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
		background-repeat: no-repeat;
		background-position: 50%;
		transform: scale(10, 10);
		opacity: 0;
		transition: transform .3s, opacity .5s;
	}

	.ripple:active:after {
		transform: scale(0, 0);
		opacity: .3;
		//设置初始状态
		transition: 0s;
		pointer-events: none;
	}
</style>
